<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItems" v-permission="'material.add'">任务创建
    </el-button>
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入名称/编码按回车" clearable class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">

        <span v-if="v.key == 'brief_code'">
          {{getStatus(v)}}
        </span>
        <span v-else-if="v.key == 'g'" style=" display: flex;
  justify-content: space-around;">
          <a href="javascript:;" class="text-yellow" @click.stop="taskClaim">任务认领</a>
          <a href="javascript:;" class="text-yellow" @click.stop="addUserClick">转派</a>
        </span>

        <span v-else>{{ v.row[v.key] }}</span>
      </template>
      <template v-slot:operation='v'>
        <a href="javascript:;" class="text-green" @click.stop="goDetail(v.row)">点检维护</a>
        <a href="javascript:;" class="text-blue">编辑</a>
        <a style="margin-left:5px;" href="javascript:;" class="text-red">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>

    <el-dialog :title="data.id ? '编辑' : '创建'" :width="formProps.dialogWidth" :close-on-click-modal="false"
      :visible.sync="editFormVisible">
      <div style="padding-right: 100px">
        <el-form :model="data" v-bind="formProps">
          <el-row>
            <el-col :span="24">
              <el-form-item label="设备编号">
                <span slot="label">
                  <span class="text-red">*</span>
                  <span>设备编号</span>
                </span>
                <el-select v-model="data.b" clearable filterable multiple style="width: 100%">
                  <el-option v-for="o in deviceNo" :key="o.value" :label="o.label" :value="o.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="点检项">
                <span slot="label">
                  <span class="text-red">*</span>
                  <span>点检项</span>
                </span>
                <el-button type="danger" class="mb-5" @click="delectspotCheck">删除</el-button>
                <el-button type="primary" class="mb-5" @click="addspotCheck">添加</el-button>

                <z-table :list="list" :tableProps="dianjiantableProps" :columns="dianjiancolumns" @editItem="editItem"
                  @deleteItem="deleteItem">

                </z-table>
              </el-form-item>

            </el-col>

            <el-col :span="12">
              <el-form-item label="点检岗位">

                <el-cascader style="width: 100%" v-model="data.o" :options="deviceNo" :props="userProps" clearable>
                </el-cascader>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点检审核岗位">
                <el-cascader style="width: 100%" v-model="data.p" :options="deviceNo" :props="userProps" clearable>
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="text-right">
          <el-button @click="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 指派/转派 -->

    <use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false" @change="useSelectChange">
    </use-select>
    <!-- 点检项 -->
    <add-spot-check :dianjianxiangShow="dianjianxiangShow" />
    <!-- 点检维护 -->
    <task-maintenance :maintainShow="maintainShow" />
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import AddSpotCheck from '../components/addSpotCheck.vue'
import TaskMaintenance from '../components/taskMaintenance.vue'
import useSelect from '@/components/Select'
export default {
  name: 'routineCheckTask',
  mixins: [commonMixin],
  components: { AddSpotCheck, TaskMaintenance, useSelect },
  props: {},
  data() {
    return {
      query: {
        queryString: '',
        page: 1,
        size: 10,
      },
      name: '点检任务',
      tableProps: {
        border: true,
        opsColWith: 240,
        fixed: false,
        highlightCurrentRow: true,
        hideOperations: false,
      },
      columns: [
        { title: '设备编号', key: 'equipment_code', width: 100, fixed: 'left' },
        { title: '任务编号', key: 'task_code', width: 100, fixed: 'left' },
        { title: '点检项', key: 'category', width: 100 },
        { title: '点检时间', key: 'key_part_type', width: 100 },
        { title: '弹性时间/H', key: 'model_name', width: 140 },
        { title: '点检岗位', key: 'brief_code', width: 100, fixed: 'right' },
        { title: '点检审核岗位', key: 'key_part_desc', minWidth: 100 },
        { title: '状态', key: 'f', width: 200, fixed: 'right' },
        { title: '任务操作', key: 'g', width: 200, fixed: 'right' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 100 },
      ],
      list: [
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
      ],
      initData: {},

      // 上传数据
      formData: new FormData(),
      removeFiles: [], // 要被删除的附件id
      // 指派/转派
      selectVisible: false,
      userId: '',
      // 人员的选择
      userProps: { multiple: true },
      deviceNo: [
        {
          value: 1,
          label: '东南',
          children: [
            {
              value: 2,
              label: '上海',
              children: [
                { value: 3, label: '普陀' },
                { value: 4, label: '黄埔' },
                { value: 5, label: '徐汇' },
              ],
            },
            {
              value: 7,
              label: '江苏',
              children: [
                { value: 8, label: '南京' },
                { value: 9, label: '苏州' },
                { value: 10, label: '无锡' },
              ],
            },
            {
              value: 12,
              label: '浙江',
              children: [
                { value: 13, label: '杭州' },
                { value: 14, label: '宁波' },
                { value: 15, label: '嘉兴' },
              ],
            },
          ],
        },
      ],
      // 有点检项后点检项table
      dianjianxiangShow: false,
      dianjiantableProps: {
        border: true,
        opsColWith: 80,
        fixed: false,
        hideOperations: true,
        selection: {
          showSelection: true,
        },
      },
      dianjiancolumns: [
        { title: '设备类型', key: 'key_part_no' },
        { title: '点检内容', key: 'key_part_name' },
        { title: '点检标准', key: 'category' },
        { title: '点检方法', key: 'key_part_type' },
        { title: '点检形式', key: 'key_part_desc' },
      ],
      // 维护
      maintainShow: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 删除点检任务
    delectspotCheck() {},
    // 任务认领
    taskClaim() {
      this.$confirm('是否确定认领此任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '认领成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消认领',
          })
        })
    },
    // 添加点检项
    addspotCheck() {
      this.dianjianxiangShow = true
    },
    // 创建数据
    createItems() {
      this.createItem()
    },
    // 添加人员
    addUserClick() {
      this.selectVisible = true
      this.$nextTick(() => {
        this.$refs.useselect.open(1, [])
      })
    },
    useSelectChange(data) {
      let users = []
      data.forEach((x) => {
        users.push(x.id)
      })
      let Data = {
        rid: this.currentId,
        users,
      }
      this.$request(this.baseUrl + 'Platform/role/addRoleUsers', Data, 'post')
        .then((r) => {
          this.$message.success('添加成功')
          this.setRoleUser({ id: this.currentId })
        })
        .catch((r) => {
          this.$message.success('添加失败')
        })
    },
    // 获取备件状态,可以直接写在table里
    getStatus(val) {
      return '正常'
    },

    // 点检维护
    goDetail(v) {
      this.maintainShow = true
    },

    // 上传
    uploadOnchange(file, fileList) {
      let f = file.raw
      const isLt20M = f.size / 1024 / 1024 < 20
      if (!isLt20M) {
        fileList.splice(fileList.indexOf(f), 1)
        return this.$message.error('上传档案大小不能超过 20MB!')
      }
      alert(9)
      this.formData.append('file', f)
    },
    // 清除附件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除${file.name}?`, 提示, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (file.FileId) {
          // 已经有附件了,进行删除
          this.removeFiles.push(file.FileId)
        } else {
          this.formData = new FormData()
          // 刚上传没有点确定
          fileList.forEach((i) => {
            if (!i.FileId && i.name != file.name) {
              this.formData.append('file', i.raw)
            }
          })
        }
      })
    },
    // 预览
    onPreview(file) {
      alert('没有接口看个毛')
    },
    // 超过最大上传数
    handleExceed() {
      return this.$message.warning('最多只能上传5张图片')
    },
  },
}
</script>

<style lang="less" scoped></style>